<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kanji</title>
<!-- jQuery Mobile references -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>

<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/phonegap-1.1.0.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/kanji-list.js"></script>
<style>
#wrap {
	text-align: center
}

#wrap span {
	display: inline-block;
	text-align: left;
	text-indent: 50px;
	font-family: "Times New Roman", Times, serif;
	font-style: normal;
	font-size: 14px;
	font-weight: normal;
}

#wrap span.kanji,span.mean_kanji {
	width: 180px;
}

#wrap span.mean_vi,span.mean_en {
	width: 280px;
}

#wrap span {
	display: inline;
}

#wrap>span {
	display: inline-block;
}
</style>

<!-- MinnanoNihongo references -->
<script type="text/javascript">
	$(document).ready(function() {
		var listViewKanji = $("#listViewKanji").css('display');
		var gridViewKanji = $("#gridViewKanji").css('display');

		//lay ve type view kanji(list or grid) tu localstorage
		var typeView = window.localStorage.getItem('kanjiTypeView');
		if (typeView) {
			if (typeView == 'grid') {
				$("#listViewKanji").css('display', 'none');
				$("#gridViewKanji").css('display', 'block');
				$("#styleView").text("List");
				$("#styleView").attr('status', 'listView');
				$('#styleView').buttonMarkup({
					icon : "bars"
				});
			} else {
				$("#listViewKanji").css('display', 'block');
				$("#gridViewKanji").css('display', 'none');
				$("#styleView").text("Grid");
				$("#styleView").attr('status', 'gridView');
				$('#styleView').buttonMarkup({
					icon : "grid"
				});
			}
		} else { //chay lan dau
			//set mac dinh hien thi dang list
			window.localStorage.setItem("kanjiTypeView", "list");
		}

		//xu ly hien thi listview or gridview khi click vao button
		$("#styleView").click(function() {
			var styleView = $("#styleView").attr('status');
			if (styleView == 'gridView') {//hien tai dang la list
				$("#styleView").text("List");
				$('#styleView').buttonMarkup({
					icon : "bars"
				});
				$("#styleView").attr('status', 'listView');
				$("#gridViewKanji").toggle('fast');
				$("#listViewKanji").hide();
				window.localStorage.setItem("kanjiTypeView", "grid");
			} else { // hien tai dang la grid
				$("#styleView").text("Grid");
				$("#styleView").attr('status', 'gridView');
				$('#styleView').buttonMarkup({
					icon : "grid"
				});
				$("#listViewKanji").toggle('fast');
				$("#gridViewKanji").hide();
				window.localStorage.setItem("kanjiTypeView", "list");
			}
		});
	});
</script>
</head>
<body onload="connectDB();">
	<!-- Start  page -->
	<div data-role="page" id="add-vocabulary-page">

		<!-- header -->
		<div id="minna-header" data-role="header" style="border: none;"
			data-theme="b" data-position="fixed">
			<h1>Danh sách Hán tự</h1>
			<a href="index.html" id="btnBack" data-ajax="false" 
				class="ui-btn ui-btn-left ui-mini ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>

			<div data-role="controlgroup" data-type="horizontal"
				class="ui-mini ui-btn-right" data-inline="true">

				<a href="search.html" id="btnSearch" data-iconpos="notext"
					data-direction="reverse" data-ajax="false"
					class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext">Search</a>

				<a href="favourite.html?action=kanji" data-ajax="false"
					data-direction="reverse"
					class="ui-btn ui-btn-inline ui-icon-heart ui-btn-icon-notext">FavouriteList</a> 
					
				<a  id="styleView" href="#" status="gridView" data-icon="grid" id="btnHome" data-iconpos="notext"
					data-direction="reverse" data-ajax="false" data-transition="none" 
					class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-notext">Grid</a>
			</div>
		</div>
		<!-- /header -->
		<!-- content -->
		<div id="minna-content" data-role="content" role="main">
			<!-- List view -->
			<div id="listViewKanji" style="display: block">
				<ol data-role="listview" id="kanjiListView" class="split-list">
				</ol>
			</div>
			<!-- /List view -->
			<!-- Grid view -->
			<div id="gridViewKanji" style="display: none">
				<div class="ui-grid-d" id="kanjiGridView"></div>
			</div>
			<!-- /Grid view -->
		</div>
		<!-- /content -->
		<div id="minna-footer" data-role="footer" style="border: none;">
		</div>
		<!-- /footer -->
	</div>
	<!-- /page -->
</body>
</html>